<template>
    <div>
        <search-bar @click.native="search" />
        <van-tabs title-active-color="#fa5e3e" line-height="2px" sticky offset-top="45" color="#fa5e3e" @change="tabChange">
            <van-loading size="24px" v-show="showLoading[tabId]" vertical>加载中...</van-loading>
            <van-tab v-for="item in tabsData" :title="item.label" :key="item.id" :name="item.id">
                <hot-item v-for="(item, index) in hotList[tabId]" :item="item" :key="item.id" :rankNum="index" />
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import searchBar from './components/search.vue';
import hotItem from '@/components/hot-item.vue';
import { getHotTabs, getHotList } from '@/api/hot';
export default {
    name: 'hot',
    components: {
        searchBar,
        hotItem
    },
    data() {
        return {
            tabsData: [],
            tabId: 0,
            hotList: {},
            showLoading: {}
        }
    },
    methods: {
        async getTabs() {
            const res = await getHotTabs();
            this.tabsData = res.data.list;
        },
        async getHotList() {
            if (!this.hotList[this.tabId]) {
                this.$set(this.showLoading, this.tabId, true);
                const { data } = await getHotList({ type: this.tabId });
                this.$set(this.hotList, this.tabId, data.list);
            }
            this.$set(this.showLoading, this.tabId, false);
        },
        search() {
            this.$router.push('/searchpage');
        },
        tabChange(name) {
            this.tabId = name;
            this.getHotList();
        }
    },
    created() {
        this.getTabs();
        this.getHotList();
    }
}
</script>
<style lang="less" scoped>
/deep/.van-tab__pane {
    padding: 10px;
}

/deep/.van-tabs__line {
    width: 25px;
}
/deep/.van-loading__text{
    font-size: 14px;
}
</style>